<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词学习 - AI单词</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f9fafb;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        .app-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .nav-bar {
            height: 50px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .tab-bar {
            height: 70px;
            background-color: white;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #6b7280;
            font-size: 10px;
        }
        .tab-item.active {
            color: #6366f1;
        }
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            padding-bottom: 90px;
        }
        .word-card {
            background-color: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        .word-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .word-title {
            font-size: 28px;
            font-weight: bold;
            color: #1f2937;
        }
        .phonetic {
            color: #6b7280;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .part-of-speech {
            display: inline-block;
            background-color: #e5e7eb;
            color: #4b5563;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            margin-right: 8px;
            margin-bottom: 15px;
        }
        .meaning {
            color: #4b5563;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .context-section {
            background-color: #f3f4f6;
            border-radius: 12px;
            padding: 15px;
            margin-top: 20px;
        }
        .context-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .context-title {
            font-weight: 600;
            color: #4b5563;
            display: flex;
            align-items: center;
        }
        .context-icon {
            color: #6366f1;
            margin-right: 8px;
        }
        .context-text {
            color: #4b5563;
            line-height: 1.6;
            font-size: 15px;
        }
        .highlighted {
            color: #6366f1;
            font-weight: 600;
        }
        .practice-section {
            margin-top: 30px;
        }
        .practice-header {
            font-weight: 600;
            color: #374151;
            margin-bottom: 15px;
        }
        .practice-item {
            background-color: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
        }
        .practice-type {
            font-size: 12px;
            color: #6366f1;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .practice-type-icon {
            margin-right: 5px;
        }
        .practice-question {
            color: #1f2937;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .practice-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .practice-option {
            background-color: #f3f4f6;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            color: #4b5563;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .practice-option:active {
            background-color: #6366f1;
            color: white;
        }
        .practice-option.correct {
            background-color: #10b981;
            color: white;
        }
        .practice-option.incorrect {
            background-color: #ef4444;
            color: white;
        }
        .word-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #6b7280;
            font-size: 12px;
        }
        .action-icon {
            background-color: #f3f4f6;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5px;
            font-size: 16px;
            color: #4b5563;
        }
        .progress-bar {
            height: 4px;
            background-color: #e5e7eb;
            border-radius: 2px;
            margin-bottom: 30px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            width: 35%;
        }
        .plan-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .plan-title {
            font-weight: 600;
            color: #374151;
        }
        .plan-progress {
            color: #6b7280;
            font-size: 14px;
        }
        
        /* 图片生成区域样式 */
        .image-generation-section {
            margin-top: 30px;
            margin-bottom: 30px;
            background-color: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .section-title {
            font-weight: 600;
            color: #4b5563;
            display: flex;
            align-items: center;
        }
        
        .image-container {
            margin: 15px 0;
            border-radius: 12px;
            overflow: hidden;
            min-height: 200px;
        }
        
        .generate-btn {
            width: 100%;
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            color: white;
            padding: 12px;
            border-radius: 10px;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .generate-btn:hover {
            opacity: 0.9;
        }
        
        .generate-btn:active {
            transform: scale(0.98);
        }
        
        .spinner {
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top: 3px solid #6366f1;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    
    <script>
        // 单词数据
        const words = [
            {
                word: "illuminate",
                phonetic: "/ˈɪ.lʊ.mə.neɪt/",
                partOfSpeech: "动词",
                meaning: "照亮；阐明；使明白",
                sentences: [
                    "The streetlights illuminate the path at night.",
                    "The teacher illuminated the complex topic with simple examples.",
                    "The moon illuminated the sky with a soft glow.",
                    "His speech illuminated the issues facing our society.",
                    "The researcher illuminated the hidden aspects of the phenomenon."
                ]
            },
            {
                word: "persevere",
                phonetic: "/ˌpɜːsɪˈvɪə(r)/",
                partOfSpeech: "动词",
                meaning: "坚持不懈；持之以恒；不屈不挠地继续",
                sentences: [
                    "The tech startup had to persevere through numerous challenges before finally developing their breakthrough AI algorithm.",
                    "Athletes must persevere through rigorous training to achieve their goals.",
                    "She persevered in her studies despite financial difficulties.",
                    "The team persevered and eventually completed the project successfully.",
                    "Persevering through adversity builds character and resilience."
                ]
            },
            {
                word: "synthesize",
                phonetic: "/ˈsɪn.θə.saɪz/",
                partOfSpeech: "动词",
                meaning: "合成；综合；整合",
                sentences: [
                    "Chemists synthesize new compounds in the lab.",
                    "The author synthesized different styles to create something unique.",
                    "The computer program can synthesize speech from text.",
                    "She synthesized the data into a coherent report.",
                    "The artist synthesized traditional and modern techniques in her work."
                ]
            },
            {
                word: "collaborate",
                phonetic: "/kəˈlæb.ə.reɪt/",
                partOfSpeech: "动词",
                meaning: "合作；协作；共同工作",
                sentences: [
                    "The two companies agreed to collaborate on the new project.",
                    "Artists often collaborate to create unique pieces.",
                    "We need to collaborate more effectively as a team.",
                    "The researchers collaborated to solve the complex problem.",
                    "Collaborating with local communities can lead to better outcomes."
                ]

            },
            {
                word: "embrace",
                phonetic: "/ɪmˈbreɪz/",
                partOfSpeech: "动词",
                meaning: "拥抱；接受；采纳",
                sentences: [
                    "She embraced her friend warmly after a long time apart.",
                    "The company is embracing new technologies to improve efficiency.",
                    "It's important to embrace change and adapt to new situations.",
                    "The community embraced the new initiative with open arms.",
                    "He embraced the challenge as an opportunity to grow."
                ]

            },
            {
                word: "excel",
                phonetic: "/ɪkˈsel/",
                partOfSpeech: "动词",
                meaning: "擅长；突出；优秀",
                sentences: [
                    "She excels in mathematics and always scores top marks.",
                    "The company excels at customer service, setting a high standard.",
                    "He excels in his role as team leader, inspiring everyone.",
                    "To excel in sports, dedication and hard work are essential.",
                    "The school excels in providing a well-rounded education."
                ]

            },
            {
                word: "motivate",
                phonetic: "/ˈməʊ.tɪ.veɪt/",
                partOfSpeech: "动词",
                meaning: "激励；激发；使有动机",
                sentences: [
                    "A good leader knows how to motivate their team.",
                    "The bonus system is designed to motivate employees.",
                    "Her passion for the cause motivates her to work tirelessly.",
                    "Teachers need to find ways to motivate students to learn.",
                    "The success of the project motivated everyone to continue working hard."
                ]

            },
            {
                word: "strive",
                phonetic: "/straɪv/",
                partOfSpeech: "动词",
                meaning: "努力；奋斗；力求",
                sentences: [
                    "They strive to provide the best service possible to their customers.",
                    "She strives for excellence in everything she does.",
                    "The company strives to be a leader in innovation.",
                    "We must strive to protect the environment for future generations.",
                    "He strives to balance his work and personal life effectively."
                ]

            },
            {
                word: "achieve",
                phonetic: "/əˈtʃiːv/",
                partOfSpeech: "动词",
                meaning: "实现；达到；获得",
                sentences: [
                    "She worked hard to achieve her dream of becoming a doctor.",
                    "The team achieved their goal of winning the championship.",
                    "It's important to set realistic goals that you can achieve.",
                    "He achieved success through determination and perseverance.",
                    "The company aims to achieve sustainable growth in the coming years."
                ]

            },
            {
                word: "transform",
                phonetic: "/trænsˈfɔːrm/",
                partOfSpeech: "动词",
                meaning: "转变；转化；改变",
                sentences: [
                    "The new software has transformed the way we do business.",
                    "She transformed the old house into a beautiful home.",
                    "Technology is transforming the education system.",
                    "He transformed his life through diet and exercise.",
                    "The company's strategy aims to transform the industry."
                ]

            },
            {
                word: "overcome",
                phonetic: "/ˌoʊ.vərˈkʌm/",
                partOfSpeech: "动词",
                meaning: "克服；战胜；胜过",
                sentences: [
                    "She overcame her fear of public speaking with practice.",
                    "The team overcame a difficult start to win the game.",
                    "It's possible to overcome obstacles with determination.",
                    "He overcame his illness and returned to work.",
                    "The community worked together to overcome the crisis."
                ]

            },
            {
                word: "thrive",
                phonetic: "/θraɪv/",
                partOfSpeech: "动词",
                meaning: "繁荣；兴旺；茁壮成长",
                sentences: [
                    "The business is thriving due to innovative strategies.",
                    "Children thrive in a loving and supportive environment.",
                    "The garden thrives in the sunny weather.",
                    "She thrives on challenges and always seeks new opportunities.",
                    "The city's economy is thriving, attracting many new businesses."
                ]

            },
            {
                word: "cultivate",
                phonetic: "/ˈkʌl.tɪ.veɪt/",
                partOfSpeech: "动词",
                meaning: "培养；耕作；陶冶",
                sentences: [
                    "The farmer cultivates the land to grow crops.",
                    "Teachers cultivate a love of learning in their students.",
                    "It's important to cultivate good habits from a young age.",
                    "The company cultivates a culture of innovation and creativity.",
                    "He cultivates his artistic skills through regular practice."
                ]

            },
            {
                word: "enhance",
                phonetic: "/ɪnˈhæns/",
                partOfSpeech: "动词",
                meaning: "增强；提高；加强",
                sentences: [
                    "The new features will enhance the user experience.",
                    "Exercise can enhance your mood and energy levels.",
                    "The company aims to enhance its market position.",
                    "She took a course to enhance her skills.",
                    "Good lighting can enhance the appearance of a room."
                ]

            },
            {
                word: "sustain",
                phonetic: "/səˈsteɪn/",
                partOfSpeech: "动词",
                meaning: "维持；支撑；持续",
                sentences: [
                    "The ecosystem must be sustained for future generations.",
                    "The company needs to sustain its growth in a competitive market.",
                    "She sustained her injury during the match.",
                    "It's crucial to sustain public interest in the project.",
                    "He sustained his energy levels with healthy snacks."
                ]

            },
            {
                word: "pursue",
                phonetic: "/pərˈsuː/",
                partOfSpeech: "动词",
                meaning: "追求；从事；继续",
                sentences: [
                    "She decided to pursue a career in medicine.",
                    "The police are pursuing the suspect.",
                    "He pursued his dream despite the obstacles.",
                    "The company plans to pursue new business opportunities.",
                    "It's important to pursue your passions in life."
                ]

            }, {
                word: "rejuvenate",
                phonetic: "/rɪˈdʒuː.və.neɪt/",
                partOfSpeech: "动词",
                meaning: "使恢复青春；使更新；使恢复活力",
                sentences: [
                    "The spa treatments are designed to rejuvenate the body and mind.",
                    "The new policies aim to rejuvenate the economy.",
                    "She took a vacation to rejuvenate herself after a long project.",
                    "The company plans to rejuvenate its product line.",
                    "The old neighborhood is being rejuvenated with new businesses."
                ]
            }, {
                word: "aspire",
                phonetic: "/əˈspaɪər/",
                partOfSpeech: "动词",
                meaning: "渴望；向往；有志于",
                sentences: [
                    "He aspires to become a successful entrepreneur.",
                    "Many young people aspire to work in the tech industry.",
                    "She aspires to make a difference in her community.",
                    "The company aspires to be a global leader.",
                    "It's important to aspire to greatness in everything you do."
                ]

            }, {
                word: "validate",
                phonetic: "/ˈvælɪdeɪt/",
                partOfSpeech: "动词",
                meaning: "验证；确认；使有效",
                sentences: [
                    "The experiment results need to be validated before publication.",
                    "She validated her parking ticket at the machine.",
                    "The software update will validate the new security protocols.",
                    "Validating customer feedback is crucial for product improvement.",
                    "The certificate validates her qualifications in the field."
                ]

            },

            // 添加更多单词数据...
            {
                word: "innovate",
                phonetic: "/ˈɪnəveɪt/",
                partOfSpeech: "动词",
                meaning: "创新；革新",
                sentences: [
                    "Tech companies constantly innovate to stay ahead of the competition.",
                    "The startup innovated a new approach to renewable energy storage.",
                    "She innovated a unique teaching method that improved student engagement.",
                    "Innovating in this field requires both creativity and technical expertise.",
                    "The company culture encourages employees to innovate and take risks."
                ]
            }
        ];
        
        let currentWordIndex = 0;
        let currentSentenceIndex = 0;
        
        function updatePracticeExercises(wordData) {
            const practiceContainer = document.querySelector('.practice-section');
            
            // 清空现有练习题
            practiceContainer.innerHTML = '';
            
            // 创建新的练习题
            const exercises = generateExercisesForWord(wordData);
            exercises.forEach(exercise => {
                practiceContainer.appendChild(exercise);
            });
            
            // 添加选项点击事件处理
            document.querySelectorAll('.practice-option').forEach(option => {
                option.addEventListener('click', function() {
                    if (this.classList.contains('correct')) {
                        alert('恭喜回答正确！');
                    } else {
                        alert('回答错误，请再试一次！');
                    }
                });
            });
        }
        
        function generateExercisesForWord(wordData) {
            const exercises = [];
            
            // 示例: 创建选择题
            const mcExercise = document.createElement('div');
            mcExercise.className = 'practice-item';
            mcExercise.innerHTML = `
                <div class="practice-type">
                    <i class="fas fa-question-circle practice-type-icon"></i>
                    选择题
                </div>
                <div class="practice-question">
                    "${wordData.word}" 在以下哪个句子中使用正确?
                </div>
                <div class="practice-options">
                    ${wordData.sentences.slice(0, 2).map((sentence, i) => 
                        `<div class="practice-option ${i === 0 ? 'correct' : ''}" data-correct="${i === 0}">${sentence}</div>`
                    ).join('')}
                </div>
            `;
            exercises.push(mcExercise);
            
            // 可以添加更多类型的练习题
            
            // 添加点击事件处理
            document.querySelectorAll('.practice-option').forEach(option => {
                option.addEventListener('click', function() {
                    if (this.getAttribute('data-correct') === 'true') {
                        this.classList.add('correct');
                        alert('恭喜回答正确！');
                    } else {
                        this.classList.add('incorrect');
                        alert('回答错误，请再试一次！');
                    }
                });
            });
            
            return exercises;
        }
        
        function loadWord(index) {
            const wordData = words[index];
            document.querySelector('.word-title').textContent = wordData.word;
            document.querySelector('.phonetic').textContent = wordData.phonetic;
            document.querySelector('.part-of-speech').textContent = wordData.partOfSpeech;
            document.querySelector('.meaning').textContent = wordData.meaning;
            updateSentence();
            
            // 更新进度
            document.querySelector('.plan-progress').textContent = `${index+1}/${words.length}`;
            document.querySelector('.progress-fill').style.width = `${(index+1)/words.length*100}%`;
            
            // 更新练习题
            updatePracticeExercises(wordData);
        }
        
        function updateSentence() {
            const sentences = words[currentWordIndex].sentences;
            currentSentenceIndex = (currentSentenceIndex + 1) % sentences.length;
            document.querySelector('.context-text').innerHTML = 
                sentences[currentSentenceIndex].replace(
                    words[currentWordIndex].word, 
                    `<span class="highlighted">${words[currentWordIndex].word}</span>`
                );
        }
        
        function nextWord() {
            if (currentWordIndex < words.length - 1) {
                currentWordIndex++;
                currentSentenceIndex = 0;
                loadWord(currentWordIndex);
            } else {
                alert('恭喜！你已经完成了所有单词的学习！');
            }
        }
        
        // 图片生成功能
        function generateWordImage() {
            const currentWord = words[currentWordIndex].word;
            const meaning = words[currentWordIndex].meaning;
            
            // 显示加载动画
            document.getElementById('image-placeholder').style.display = 'none';
            document.getElementById('generated-image').style.display = 'none';
            document.getElementById('loading-animation').style.display = 'flex';
            
            // 构建提示词
            const prompt = `创建高品质闪卡，包括单词和相匹配的童趣元素内容。具有以下特点: 
### 构图要素
1. **框架格式**
- 闪卡的顶部区域显示英文单词"${currentWord}"，可爱字体，可能带有立体阴影
- 闪卡的中间显示与单词相关的童趣元素内容
2. **场景内容**：
- 创建一个相匹配能帮助学生记忆理解的童趣元素内容，3D渲染、CG动画、微缩三维风格
- 元素内容完全与单词"${currentWord}"(${meaning})意义高度相关联，没有复杂的场景和多余的杂物
- 顶部显示白色平面的英文单词"${currentWord}"，一定要准确生成，不可以有拼写错误`;
            
            // 调用API生成图片
            fetch('https://open.bigmodel.cn/api/paas/v4/images/generations', {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'Authorization': '2e880a697106418ba0793c21a05ec64b.0lubRxJz5w2twp65'
                },
                body: JSON.stringify({
                    model: 'cogview-3-flash',
                    prompt: prompt,
                    size: "1024x1024",
                    n: 1
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('API请求失败: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                if (data && data.data && data.data[0] && data.data[0].url) {
                    // 获取图片URL
                    const imageUrl = data.data[0].url;
                    
                    // 加载图片
                    const img = new Image();
                    img.onload = function() {
                        // 隐藏加载动画，显示图片
                        document.getElementById('loading-animation').style.display = 'none';
                        const generatedImage = document.getElementById('generated-image');
                        generatedImage.src = imageUrl;
                        generatedImage.style.display = 'block';
                    };
                    img.onerror = function() {
                        // 处理图片加载失败
                        document.getElementById('loading-animation').style.display = 'none';
                        document.getElementById('image-placeholder').style.display = 'flex';
                        alert('图片加载失败，请稍后再试');
                    };
                    img.src = imageUrl;
                } else {
                    throw new Error('API返回数据格式不正确');
                }
            })
            .catch(error => {
                console.error('图片生成失败:', error);
                document.getElementById('loading-animation').style.display = 'none';
                document.getElementById('image-placeholder').style.display = 'flex';
                alert('图片生成失败: ' + error.message);
            });
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadWord(currentWordIndex);
            
            // 绑定刷新例句按钮
            document.querySelector('.fa-sync-alt').addEventListener('click', updateSentence);
            
            // 绑定已掌握按钮
            document.querySelector('.action-btn:nth-child(4)').addEventListener('click', nextWord);
            
            // 绑定生成图片按钮
            document.getElementById('generate-image-btn').addEventListener('click', generateWordImage);
        });
    </script>
</head>
<body>
    <div class="app-container">
        <div class="nav-bar">
            <span class="font-semibold">单词学习</span>
            <i class="fas fa-ellipsis-h text-gray-600"></i>
        </div>
        
        <div class="content">
            <div class="plan-header">
                <div class="plan-title">科技词汇 - 中级</div>
                <div class="plan-progress">7/20</div>
            </div>
            
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            
            <div class="word-card">
                <div class="word-header">
                    <div>
                        <div class="word-title">persevere</div>
                        <div class="phonetic">/ˌpɜːsɪˈvɪə(r)/</div>
                    </div>
                    <i class="fas fa-volume-up text-indigo-600 text-xl"></i>
                </div>
                
                <div class="part-of-speech">动词</div>
                
                <div class="meaning">坚持不懈；持之以恒；不屈不挠地继续</div>
                
                <div class="context-section">
                    <div class="context-header">
                        <div class="context-title">
                            <i class="fas fa-lightbulb context-icon"></i>
                            AI生成语境例句
                        </div>
                        <i class="fas fa-sync-alt text-indigo-500 cursor-pointer"></i>
                        <i class="fas fa-sync-alt text-indigo-500 cursor-pointer"></i>
                    </div>
                    
                    <div class="context-text">
                        The tech startup had to <span class="highlighted">persevere</span> through numerous challenges before finally developing their breakthrough AI algorithm. Their determination ultimately led to a revolutionary product that changed the industry.
                    </div>
                </div>
                
                <div class="word-actions">
                    <div class="action-btn">
                        <div class="action-icon">
                            <i class="fas fa-bookmark"></i>
                        </div>
                        <span>收藏</span>
                    </div>
                    
                    <div class="action-btn">
                        <div class="action-icon">
                            <i class="fas fa-share-alt"></i>
                        </div>
                        <span>分享</span>
                    </div>
                    
                    <div class="action-btn">
                        <div class="action-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <span>复习</span>
                    </div>
                    
                    <div class="action-btn">
                        <div class="action-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <span>已掌握</span>
                    </div>
                </div>
            </div>
            
            <div class="practice-section">
                <div class="practice-header">交互式练习</div>
                
                <div class="practice-item">
                    <div class="practice-type">
                        <i class="fas fa-tasks practice-type-icon"></i>
                        选择题
                    </div>
                    
                    <div class="practice-question">
                        选择与 "persevere" 含义最接近的词：
                    </div>
                    
                    <div class="practice-options">
                        <div class="practice-option">放弃 (abandon)</div>
                        <div class="practice-option correct">坚持 (persist)</div>
                        <div class="practice-option">犹豫 (hesitate)</div>
                        <div class="practice-option">退缩 (retreat)</div>
                    </div>
                </div>
                
                <div class="practice-item">
                    <div class="practice-type">
                        <i class="fas fa-pen practice-type-icon"></i>
                        填空题
                    </div>
                    
                    <div class="practice-question">
                        Despite facing numerous setbacks, she continued to ________ until she achieved her goals.
                    </div>
                    
                    <input type="text" class="w-full p-3 border border-gray-300 rounded-lg mt-2" placeholder="输入答案">
                </div>
            </div>
            
            <!-- 图片生成区域 -->
            <div class="image-generation-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-image context-icon"></i>
                        ai生成单词卡片
                    </div>
                </div>
                
                <div class="image-container">
                    <div id="image-placeholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background-color: #f3f4f6; border-radius: 0.5rem; text-align: center;">
                        <i class="fas fa-image" style="color: #9ca3af; font-size: 3rem; margin-bottom: 0.75rem;"></i>
                        <p style="color: #6b7280;">点击下方按钮生成与单词相关的图片</p>
                    </div>
                    <img id="generated-image" style="width: 100%; border-radius: 0.5rem; display: none;" src="" alt="生成的图片">
                    <div id="loading-animation" style="display: none; align-items: center; justify-content: center; padding: 2.5rem;">
                        <div class="spinner"></div>
                        <span style="margin-left: 0.75rem; color: #6366f1;">正在生成图片...</span>
                    </div>
                </div>
                
                <button id="generate-image-btn" class="generate-btn">
                    <i class="fas fa-magic mr-2"></i>生成单词卡片
                </button>
            </div>
        </div>
        
        <div class="tab-bar">
            <div class="tab-item" onclick="window.location.href='nft-buddy.html'">
                <i class="fas fa-dragon tab-icon"></i>
                <span>伙伴</span>
            </div>
            
            <div class="tab-item active">
                <i class="fas fa-book tab-icon"></i>
                <span>学习</span>
            </div>
            
            <div class="tab-item" onclick="window.location.href='ai-tutor.html'">
                <i class="fas fa-robot tab-icon"></i>
                <span>AI导师</span>
            </div>
            
            <div class="tab-item" onclick="window.location.href='story-mode.html'">
                <i class="fas fa-book-open tab-icon"></i>
                <span>故事</span>
            </div>
            
            <div class="tab-item" onclick="window.location.href='learning-report.html'">
                <i class="fas fa-chart-line tab-icon"></i>
                <span>报告</span>
            </div>
        </div>
    </div>
</body>
</html>